<template>
  <base-container :show-title="false">
    <a-spin :spinning="loading">
      <div class="main flex justify-between">
        <a-descriptions size="small" :column="3" class="main__descriptions">
          <template #title>
            <span @click="handleBack" class="cursor-pointer">
              <arrow-left-outlined class="inline-block leading-0 ft-16 mr-2" />
              活动序号：{{ activity.id }}
            </span>
          </template>
          <a-descriptions-item label="活动类型">{{ ActivityTypeKeyMap[activity.type] }}</a-descriptions-item>
          <a-descriptions-item label="活动状态">{{ ActivityStatusKeyMap[activity.status] }}</a-descriptions-item>
          <a-descriptions-item label="活动开始时间">{{ activity.startTime }}</a-descriptions-item>
          <a-descriptions-item label="活动结束时间">{{ activity.endTime }}</a-descriptions-item>
          <a-descriptions-item label="活动更新时间">{{ activity.updateTime }}</a-descriptions-item>
          <a-descriptions-item label="活动创建人id">{{ activity.createUserId }}</a-descriptions-item>
        </a-descriptions>
      </div>
      <divider />
      <table-toolbar title="活动规则" />
      <a-table row-key="id" :columns="column" :loading="loading" :data-source="activity?.freeWords" />
    </a-spin>
  </base-container>
</template>

<script lang="ts" setup>
import type { TableProps } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
import { onMounted } from 'vue'
import BaseContainer from '@/components/base-container/index.vue'
import getActivity from '@/services/activity/getActivity'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import TableToolbar from '@/components/table-toolbar/index.vue'
import Divider from '@/components/divider/index.vue'
import { ActivityStatusKeyMap } from '@/core/mapper/status'
import { ActivityTypeKeyMap } from '@/core/mapper/activity'

const route = useRoute()
const router = useRouter()
const [activity, fetchActivity, loading] = getActivity()

const column: TableProps['columns'] = [
  {
    title: '参与活动最低价',
    dataIndex: 'lowPrice',
    key: 'lowPrice'
  },
  {
    title: '参与活动最高价',
    dataIndex: 'highPrice',
    key: 'highPrice'
  },
  {
    title: '最少参与活动关键词数',
    dataIndex: 'wordNum',
    key: 'wordNum'
  }
]

async function loadActivityDetail() {
  const activityId = route.query.id as string

  await fetchActivity({
    activityId: Number(activityId)
  })
}

function handleBack() {
  router.go(-1)
}

onMounted(() => {
  loadActivityDetail()
})
</script>
